目標
昨天連接上Supabase，並開啟資料表讀取權限傳回資料
今天要將連接API的語法稍微改寫
因為想修改成只讀取一次資料庫
讓資料能同時運用在B與C組件
這篇也會帶到Computed用法
最後補上圖片檔案，做一個網站的雛型。

步驟
1.
將語法改為 讀取action_event資料表
這張資料表存的是活動資訊和副本資訊關聯的資料
action_event 也記得要開啟讀取權限
將結果存到result

再用computed屬性 將result做處理
因為只需要取不重複的活動
所以這函式做的是 過濾掉重複的actionNo 存取為actionList

在template裡 將actionList印出來

接下來為了把圖片完整顯示出來
在src/assets/ 路徑上補個圖片檔案
在script裡頭 補上這兩行
前面是抓取路徑下的圖片路徑
下面的函式則是依照傳過來的變數 顯示圖片路徑

<script setup>
...略

const images = require.context('@/assets/Action', false, /\.png$/)
function getImg(actionNo) {
  return images(`./A${actionNo}.png`)
}
</script>

同樣的 在template裡也做個調整
活動列表的每張圖片大約分3等分的寬度
也就是每張圖片會放在col-3 的區塊裡
圖片路徑 則是用到我們上述寫的函式

<template>
	<div class="row"><h1>活動一覽</h1></div>
	<div class="row" >
		<div class="col-3 " v-for="item in actionList" :key="item.ID">
			<img :src="getImg(item.actionNo)" style="width:100%;"
			:data-dataInfo="item.actionNo + item.eventNo ">
		</div>
	</div>
</template>

回到畫面
圖片則如預期顯示出來

備註
1.
如同之前提到的Bootstrap網格系統
圖片放置在col-3區塊
因為1個row可以塞進12等分的col
所以一個row可以塞4張圖片
這個取決於自己喜好調整。

這篇主要講述
將Supabase傳回來的資料result
處理為具有Computed屬性的actionList
利用Computed即時計算的特性
呈現在畫面上。